import React from "react";
import { Modal, Switch, Button } from "antd";
import { renderTypeMap } from "./CreateForm";
import styles from "./index.less";

const Line = (props) => {
  const { label, value } = props;

  return (
    <div className={styles.row}>
      <span className={styles.key}>{label}</span>
      <span className={styles.word}>{value}</span>
    </div>
  );
};

class Detail extends React.Component {
  handleCancel = () => {
    const { handleDetailVisible } = this.props;
    handleDetailVisible(false, "");
  };

  render() {
    const { visible, data = {}, title = "" } = this.props;
    const record = data || {};
    const status = (
      <Switch
        defaultChecked
        checked={Boolean(Number(record.status))}
        size="small"
        disabled
      />
    );

    return (
      <Modal
        title={title}
        visible={visible}
        width="582px"
        centered
        onCancel={this.handleCancel}
        footer={[
          <Button key="back" onClick={this.handleCancel}>
            关闭
          </Button>,
        ]}
      >
        <div className={styles.root}>
          <Line label="通知主题名称：" value={record.noticeThemName} />

          <Line label="通知类型：" value={renderTypeMap[record.type] || ''} />

          <Line label="消息主题名称：" value={record.messageThemName} />
          
          <Line label="消息主题编码：" value={record.messageThemCode} />

          <Line label="启用状态：" value={status} />

        </div>
      </Modal>
    );
  }
}

export default Detail;
